<template>
	<view>
		<uni-card class="card" :is-shadow="false" is-full @click="supply('')">
			<uni-title type="h4" align="center" :title="detail.projectName + '中标公示'"></uni-title>
		</uni-card>
		<uni-card class="card" :is-shadow="false" is-full>
			<text class="left">项目名称</text>
			<text class="right">{{
        detail.projectName ? detail.projectName : "暂无"
      }}</text>
		</uni-card>
		<uni-card class="card" :is-shadow="false" is-full>
			<text class="left">项目编号</text>
			<text class="right">{{
        detail.projectNo ? detail.projectNo : "暂无"
      }}</text>
		</uni-card>
		<uni-card class="card" :is-shadow="false" is-full>
			<text class="left">中标方</text>
			<text class="right">{{
        detail.bidWinner ? detail.bidWinner : "暂无"
      }}</text>
		</uni-card>
		<uni-card class="card" :is-shadow="false" is-full>
			<text class="left">招标方</text>
			<text class="right">{{
        detail.purchaserName ? detail.purchaserName : "暂无"
      }}</text>
		</uni-card>
		<uni-card class="card" :is-shadow="false" is-full>
			<text class="left">中标价格(元)</text>
			<text class="right">{{
        detail.bidPrice ? detail.bidPrice : "暂无"
      }}</text>
		</uni-card>
		<uni-card class="card" :is-shadow="false" is-full>
			<text class="left">中标日期</text>
			<text class="right">{{ detail.bidDate ? detail.bidDate : "暂无" }}</text>
		</uni-card>
		<uni-card class="card" :is-shadow="false" is-full>
			<text class="left">代理方</text>
			<text class="right">{{
        detail.agencyCompany ? detail.agencyCompany : "暂无"
      }}</text>
		</uni-card>
		<uni-card class="card" :is-shadow="false" is-full>
			<text class="left">项目负责人</text>
			<text class="right">{{
        detail.director ? detail.director : "暂无"
      }}</text>
		</uni-card>
		<uni-card class="card" :is-shadow="false" is-full>
			<text class="left">公示起始时间</text>
			<text class="right">{{
        detail.startDate ? detail.startDate : "暂无"
      }}</text>
		</uni-card>
		<uni-card class="card" :is-shadow="false" is-full>
			<text class="left">公示截止时间</text>
			<text class="right">{{ detail.endDate ? detail.endDate : "暂无" }}</text>
		</uni-card>
		<uni-card class="card" :is-shadow="false" is-full>
			<text class="left">建设单位</text>
			<text class="right">{{
        detail.buildUnit ? detail.buildUnit : "暂无"
      }}</text>
		</uni-card>
		<uni-card class="card" :is-shadow="false" is-full>
			<text class="left">电话</text>
			<text class="right">{{
        detail.complainPhone ? detail.complainPhone : "暂无"
      }}</text>
		</uni-card>
		<uni-card class="card" :is-shadow="false" is-full>
			<text class="left">图片</text>
			<text class="right">
				<view v-if="detail.images.length == 0">暂无</view>
				<view v-else>
					<view style="color: #2880e4; margin-right: 20rpx; margin-top: 20rpx"
						v-for="(item, index) in detail.images" :key="index" @click="xiazai(item)">{{ item.name }}</view>
				</view>
			</text>
		</uni-card>
		<uni-card class="card" :is-shadow="false" is-full>
			<text class="left">附件</text>
			<text class="right">
				<view v-if="detail.qtfiles.length == 0">暂无</view>
				<view v-else>
					<view style="color: #2880e4; margin-right: 20rpx; margin-top: 20rpx"
						v-for="(item, index) in detail.qtfiles" :key="index" @click="xiazai(item)">{{ item.name }}</view>
				</view>
			</text>
		</uni-card>
		<view style="height: 200rpx"></view>
	</view>
</template>
<script>
	import {
		bid
	} from "@/utils/api.js";
	export default {
		data() {
			return {
				title: "Hello",
				city: 0,
				value: 0,
				cityList: [{
						value: 0,
						text: "临沂市"
					},
					{
						value: 1,
						text: "罗庄区"
					},
					{
						value: 2,
						text: "河东区"
					},
					{
						value: 3,
						text: "兰山区"
					},
				],
				rangeList: [{
						value: 0,
						text: "招标公示"
					},
					{
						value: 1,
						text: "中标公示"
					},
					{
						value: 2,
						text: "成交公示"
					},
				],
				detail: {
					images: [],
				},
			};
		},
		onLoad(e) {
			let data = JSON.parse(e.data);
			this.getDetail(data.id);
		},
		methods: {
			async getDetail(e) {
				let res = await bid.getDetail({
					id: e,
				});
				this.detail = res.data;
			},
			supply(e) {
				uni.navigateTo({
					url: "/pages/" + e + "/" + e,
				});
			},
			change(e) {
				console.log("e:", e);
			},
			xiazai(e) {
				if (this.isWechatBrowser()) {
					uni.showToast({
						icon: "none",
						title: "可在浏览器打开网页来下载此文件"
					})
				} else {
					console.log(e);
					console.log(this.$baseUrl);
					uni.downloadFile({
						url: this.$baseUrl + e.url, //仅为示例，并非真实的资源
						success: (res) => {
							console.log(res);
							if (res.statusCode === 200) {
								console.log("下载成功");
								var oA = document.createElement("a");
								oA.download = e.name; // 设置下载的文件名，默认是'下载'
								oA.href = res.tempFilePath; //临时路径再保存到本地
								document.body.appendChild(oA);
								oA.click();
								oA.remove(); // 下载之后把创建的元素删除
							}
						},
					});
				}
			},
			// 判断是否是微信内置浏览器
			isWechatBrowser() {
				var ua = navigator.userAgent.toLowerCase();
				return ua.indexOf('micromessenger') !== -1;
			}
		},
	};
</script>

<style scoped lang="less">
	.card {
		width: 100%;
	}

	.left {
		width: 35%;
		float: left;
		font-size: 14px;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #8d8d8d;
		line-height: 20px;
	}

	.right {
		width: 60%;
		float: right;
		font-size: 15px;
		font-family: PingFang-SC-Medium, PingFang-SC;
		font-weight: 500;
		color: #000000;
		line-height: 21px;
	}

	.project-list {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;

		.project-info {
			width: 92%;
			margin-top: 20rpx;
			margin-bottom: 20rpx;
			display: flex;

			.info-left {
				image {
					width: 220rpx;
					height: 300rpx;
					border-radius: 10rpx;
				}
			}

			.info-right {
				width: 470rpx;
				margin-left: 8rpx;
				display: flex;
				justify-content: space-around;
				flex-direction: column;

				.project-detail {
					font-size: 28rpx;
					color: #303030;
				}
			}
		}
	}
</style>
